<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美食管理系统</title>
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            display: flex;
            background-color: #faf3e0;
        }

        .sidebar {
            width: 220px;
            background-color: #eabf9f;
            padding-top: 20px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        }

        .sidebar button {
            display: block;
            width: 100%;
            padding: 18px 25px;
            text-align: left;
            background-color: transparent;
            border: none;
            color: #495464;
            cursor: pointer;
            transition: background-color 0.3s;
            font-size: 17px;
        }

        .sidebar button:hover {
            background-color: #b68973;
            color: white;
        }

        .sidebar button.active {
            background-color: #b68973;
            color: white;
        }

        .main-content {
            flex: 1;
            padding: 30px;
        }

        .tab-content {
            display: none;
            background-color: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 25px;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 15px;
            text-align: left;
        }

        th {
            background-color: #f4f4f4;
        }

        button {
            padding: 10px 20px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .add-btn {
            background-color: #7c9473;
            color: white;
        }

        .add-btn:hover {
            background-color: #5f7457;
        }

        .edit-btn {
            background-color: #ffc107;
            color: white;
        }

        .edit-btn:hover {
            background-color: #e0a800;
        }

        .delete-btn {
            background-color: #dc3545;
            color: white;
        }

        .delete-btn:hover {
            background-color: #c82333;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 25px;
            border: 1px solid #888;
            width: 35%;
            border-radius: 10px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 30px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* 搜索框样式 */
        .search-input {
            padding: 10px;
            margin-right: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div class="sidebar">
        <button class="tablinks" onclick="openTab(event, 'Home')">首页</button>
        <button class="tablinks" onclick="openTab(event, 'DishManagement')">菜品信息管理</button>
        <button class="tablinks" onclick="openTab(event, 'IngredientManagement')">食材信息管理</button>
        <button class="tablinks" onclick="openTab(event, 'OrderManagement')">订单信息管理</button>
        <button class="tablinks" onclick="openTab(event, 'CustomerManagement')">顾客信息管理</button>
        <button class="tablinks" onclick="openTab(event, 'Statistics')">数据统计</button>
    </div>
    <div class="main-content">
        <div id="Home" class="tab-content">
            <h2>首页</h2>
            <p>欢迎使用美食管理系统，您可以通过左侧导航栏选择不同的功能模块进行操作。</p>
        </div>
        <div id="DishManagement" class="tab-content">
            <h2>菜品信息管理</h2>
            <input type="text" class="search-input" id="dishSearch" placeholder="搜索菜品名称" oninput="searchDishes()">
            <button class="add-btn" onclick="openAddDishModal()">添加菜品</button>
            <table id="dishTable">
                <thead>
                    <tr>
                        <th>菜品名称</th>
                        <th>菜品价格</th>
                        <th>菜品类型</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="IngredientManagement" class="tab-content">
            <h2>食材信息管理</h2>
            <input type="text" class="search-input" id="ingredientSearch" placeholder="搜索食材名称" oninput="searchIngredients()">
            <button class="add-btn" onclick="openAddIngredientModal()">添加食材</button>
            <table id="ingredientTable">
                <thead>
                    <tr>
                        <th>食材名称</th>
                        <th>食材数量</th>
                        <th>食材单位</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="OrderManagement" class="tab-content">
            <h2>订单信息管理</h2>
            <input type="text" class="search-input" id="orderSearch" placeholder="搜索订单编号" oninput="searchOrders()">
            <button class="add-btn" onclick="openAddOrderModal()">添加订单</button>
            <table id="orderTable">
                <thead>
                    <tr>
                        <th>订单编号</th>
                        <th>菜品名称</th>
                        <th>顾客姓名</th>
                        <th>订单时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="CustomerManagement" class="tab-content">
            <h2>顾客信息管理</h2>
            <input type="text" class="search-input" id="customerSearch" placeholder="搜索顾客姓名" oninput="searchCustomers()">
            <button class="add-btn" onclick="openAddCustomerModal()">添加顾客</button>
            <table id="customerTable">
                <thead>
                    <tr>
                        <th>顾客姓名</th>
                        <th>联系方式</th>
                        <th>常点菜品</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="Statistics" class="tab-content">
            <h2>数据统计</h2>
            <p>菜品总数: <span id="dishCount">0</span></p>
            <p>食材总数: <span id="ingredientCount">0</span></p>
            <p>订单总数: <span id="orderCount">0</span></p>
            <p>顾客总数: <span id="customerCount">0</span></p>
        </div>
    </div>

    <!-- 菜品添加/编辑模态框 -->
    <div id="dishModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeDishModal()">&times;</span>
            <h2 id="dishModalTitle">添加菜品</h2>
            <label for="dishName">菜品名称:</label>
            <input type="text" id="dishName" required><br>
            <label for="dishPrice">菜品价格:</label>
            <input type="number" id="dishPrice" required><br>
            <label for="dishType">菜品类型:</label>
            <input type="text" id="dishType" required><br>
            <button onclick="saveDish()">保存</button>
        </div>
    </div>

    <!-- 食材添加/编辑模态框 -->
    <div id="ingredientModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeIngredientModal()">&times;</span>
            <h2 id="ingredientModalTitle">添加食材</h2>
            <label for="ingredientName">食材名称:</label>
            <input type="text" id="ingredientName" required><br>
            <label for="ingredientQuantity">食材数量:</label>
            <input type="number" id="ingredientQuantity" required><br>
            <label for="ingredientUnit">食材单位:</label>
            <input type="text" id="ingredientUnit" required><br>
            <button onclick="saveIngredient()">保存</button>
        </div>
    </div>

    <!-- 订单添加/编辑模态框 -->
    <div id="orderModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeOrderModal()">&times;</span>
            <h2 id="orderModalTitle">添加订单</h2>
            <label for="orderNumber">订单编号:</label>
            <input type="text" id="orderNumber" required><br>
            <label for="orderDish">菜品名称:</label>
            <input type="text" id="orderDish" required><br>
            <label for="orderCustomer">顾客姓名:</label>
            <input type="text" id="orderCustomer" required><br>
            <label for="orderTime">订单时间:</label>
            <input type="text" id="orderTime" required><br>
            <button onclick="saveOrder()">保存</button>
        </div>
    </div>

    <!-- 顾客添加/编辑模态框 -->
    <div id="customerModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeCustomerModal()">&times;</span>
            <h2 id="customerModalTitle">添加顾客</h2>
            <label for="customerName">顾客姓名:</label>
            <input type="text" id="customerName" required><br>
            <label for="customerContact">联系方式:</label>
            <input type="text" id="customerContact" required><br>
            <label for="customerFavoriteDish">常点菜品:</label>
            <input type="text" id="customerFavoriteDish" required><br>
            <button onclick="saveCustomer()">保存</button>
        </div>
    </div>

    <script>
        let currentDishIndex = null;
        let currentIngredientIndex = null;
        let currentOrderIndex = null;
        let currentCustomerIndex = null;

        // 初始化表格
        function initTables() {
            // 菜品管理
            let dishes = JSON.parse(localStorage.getItem('dishes')) || [
                { name: '鱼香肉丝', price: 28, type: '川菜' },
                { name: '宫保鸡丁', price: 26, type: '川菜' },
                { name: '糖醋排骨', price: 32, type: '浙菜' },
                { name: '麻婆豆腐', price: 18, type: '川菜' },
                { name: '东坡肉', price: 38, type: '浙菜' },
                { name: '回锅肉', price: 25, type: '川菜' },
                { name: '西湖醋鱼', price: 40, type: '浙菜' },
                { name: '水煮鱼', price: 45, type: '川菜' },
                { name: '龙井虾仁', price: 50, type: '浙菜' },
                { name: '夫妻肺片', price: 22, type: '川菜' }
            ];
            localStorage.setItem('dishes', JSON.stringify(dishes));
            let dishTable = document.getElementById('dishTable').getElementsByTagName('tbody')[0];
            dishTable.innerHTML = '';
            dishes.forEach((dish, index) => {
                let row = dishTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = dish.name;
                cell2.innerHTML = dish.price;
                cell3.innerHTML = dish.type;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditDishModal(${index})">编辑</button><button class="delete-btn" onclick="deleteDish(${index})">删除</button>`;
            });

            // 食材管理
            let ingredients = JSON.parse(localStorage.getItem('ingredients')) || [
                { name: '猪肉', quantity: 50, unit: '斤' },
                { name: '牛肉', quantity: 30, unit: '斤' },
                { name: '鸡肉', quantity: 40, unit: '斤' },
                { name: '青椒', quantity: 80, unit: '斤' },
                { name: '红椒', quantity: 70, unit: '斤' },
                { name: '土豆', quantity: 100, unit: '斤' },
                { name: '洋葱', quantity: 60, unit: '斤' },
                { name: '大蒜', quantity: 30, unit: '斤' },
                { name: '生姜', quantity: 20, unit: '斤' },
                { name: '大葱', quantity: 40, unit: '斤' }
            ];
            localStorage.setItem('ingredients', JSON.stringify(ingredients));
            let ingredientTable = document.getElementById('ingredientTable').getElementsByTagName('tbody')[0];
            ingredientTable.innerHTML = '';
            ingredients.forEach((ingredient, index) => {
                let row = ingredientTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = ingredient.name;
                cell2.innerHTML = ingredient.quantity;
                cell3.innerHTML = ingredient.unit;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditIngredientModal(${index})">编辑</button><button class="delete-btn" onclick="deleteIngredient(${index})">删除</button>`;
            });

            // 订单管理
            let orders = JSON.parse(localStorage.getItem('orders')) || [
                { number: '001', dish: '鱼香肉丝', customer: '张三', time: '2025-03-20' },
                { number: '002', dish: '宫保鸡丁', customer: '李四', time: '2025-03-21' },
                { number: '003', dish: '糖醋排骨', customer: '王五', time: '2025-03-22' },
                { number: '004', dish: '麻婆豆腐', customer: '赵六', time: '2025-03-23' },
                { number: '005', dish: '东坡肉', customer: '孙七', time: '2025-03-24' },
                { number: '006', dish: '回锅肉', customer: '周八', time: '2025-03-25' },
                { number: '007', dish: '西湖醋鱼', customer: '吴九', time: '2025-03-26' },
                { number: '008', dish: '水煮鱼', customer: '郑十', time: '2025-03-27' },
                { number: '009', dish: '龙井虾仁', customer: '王十一', time: '2025-03-28' },
                { number: '010', dish: '夫妻肺片', customer: '李十二', time: '2025-03-29' }
            ];
            localStorage.setItem('orders', JSON.stringify(orders));
            let orderTable = document.getElementById('orderTable').getElementsByTagName('tbody')[0];
            orderTable.innerHTML = '';
            orders.forEach((order, index) => {
                let row = orderTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                let cell5 = row.insertCell(4);
                cell1.innerHTML = order.number;
                cell2.innerHTML = order.dish;
                cell3.innerHTML = order.customer;
                cell4.innerHTML = order.time;
                cell5.innerHTML = `<button class="edit-btn" onclick="openEditOrderModal(${index})">编辑</button><button class="delete-btn" onclick="deleteOrder(${index})">删除</button>`;
            });

            // 顾客管理
            let customers = JSON.parse(localStorage.getItem('customers')) || [
                { name: '张三', contact: '13800138000', favoriteDish: '鱼香肉丝' },
                { name: '李四', contact: '13900139000', favoriteDish: '宫保鸡丁' },
                { name: '王五', contact: '13700137000', favoriteDish: '糖醋排骨' },
                { name: '赵六', contact: '13600136000', favoriteDish: '麻婆豆腐' },
                { name: '孙七', contact: '13500135000', favoriteDish: '东坡肉' },
                { name: '周八', contact: '13400134000', favoriteDish: '回锅肉' },
                { name: '吴九', contact: '13300133000', favoriteDish: '西湖醋鱼' },
                { name: '郑十', contact: '13200132000', favoriteDish: '水煮鱼' },
                { name: '王十一', contact: '13100131000', favoriteDish: '龙井虾仁' },
                { name: '李十二', contact: '13000130000', favoriteDish: '夫妻肺片' }
            ];
            localStorage.setItem('customers', JSON.stringify(customers));
            let customerTable = document.getElementById('customerTable').getElementsByTagName('tbody')[0];
            customerTable.innerHTML = '';
            customers.forEach((customer, index) => {
                let row = customerTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = customer.name;
                cell2.innerHTML = customer.contact;
                cell3.innerHTML = customer.favoriteDish;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditCustomerModal(${index})">编辑</button><button class="delete-btn" onclick="deleteCustomer(${index})">删除</button>`;
            });

            // 更新数据统计
            document.getElementById('dishCount').textContent = dishes.length;
            document.getElementById('ingredientCount').textContent = ingredients.length;
            document.getElementById('orderCount').textContent = orders.length;
            document.getElementById('customerCount').textContent = customers.length;
        }

        // 打开 tab 页面
        function openTab(evt, tabName) {
            let i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName('tab-content');
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = 'none';
            }
            tablinks = document.getElementsByClassName('tablinks');
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(' active', '');
            }
            document.getElementById(tabName).style.display = 'block';
            evt.currentTarget.className += ' active';
        }

        // 菜品管理
        function openAddDishModal() {
            currentDishIndex = null;
            document.getElementById('dishModalTitle').textContent = '添加菜品';
            document.getElementById('dishName').value = '';
            document.getElementById('dishPrice').value = '';
            document.getElementById('dishType').value = '';
            document.getElementById('dishModal').style.display = 'block';
        }

        function openEditDishModal(index) {
            currentDishIndex = index;
            let dishes = JSON.parse(localStorage.getItem('dishes'));
            let dish = dishes[index];
            document.getElementById('dishModalTitle').textContent = '编辑菜品';
            document.getElementById('dishName').value = dish.name;
            document.getElementById('dishPrice').value = dish.price;
            document.getElementById('dishType').value = dish.type;
            document.getElementById('dishModal').style.display = 'block';
        }

        function closeDishModal() {
            document.getElementById('dishModal').style.display = 'none';
        }

        function saveDish() {
            let dishes = JSON.parse(localStorage.getItem('dishes')) || [];
            let name = document.getElementById('dishName').value;
            let price = parseInt(document.getElementById('dishPrice').value);
            let type = document.getElementById('dishType').value;
            if (currentDishIndex === null) {
                dishes.push({ name, price, type });
            } else {
                dishes[currentDishIndex] = { name, price, type };
            }
            localStorage.setItem('dishes', JSON.stringify(dishes));
            initTables();
            closeDishModal();
        }

        function deleteDish(index) {
            let dishes = JSON.parse(localStorage.getItem('dishes')) || [];
            dishes.splice(index, 1);
            localStorage.setItem('dishes', JSON.stringify(dishes));
            initTables();
        }

        // 食材管理
        function openAddIngredientModal() {
            currentIngredientIndex = null;
            document.getElementById('ingredientModalTitle').textContent = '添加食材';
            document.getElementById('ingredientName').value = '';
            document.getElementById('ingredientQuantity').value = '';
            document.getElementById('ingredientUnit').value = '';
            document.getElementById('ingredientModal').style.display = 'block';
        }

        function openEditIngredientModal(index) {
            currentIngredientIndex = index;
            let ingredients = JSON.parse(localStorage.getItem('ingredients'));
            let ingredient = ingredients[index];
            document.getElementById('ingredientModalTitle').textContent = '编辑食材';
            document.getElementById('ingredientName').value = ingredient.name;
            document.getElementById('ingredientQuantity').value = ingredient.quantity;
            document.getElementById('ingredientUnit').value = ingredient.unit;
            document.getElementById('ingredientModal').style.display = 'block';
        }

        function closeIngredientModal() {
            document.getElementById('ingredientModal').style.display = 'none';
        }

        function saveIngredient() {
            let ingredients = JSON.parse(localStorage.getItem('ingredients')) || [];
            let name = document.getElementById('ingredientName').value;
            let quantity = parseInt(document.getElementById('ingredientQuantity').value);
            let unit = document.getElementById('ingredientUnit').value;
            if (currentIngredientIndex === null) {
                ingredients.push({ name, quantity, unit });
            } else {
                ingredients[currentIngredientIndex] = { name, quantity, unit };
            }
            localStorage.setItem('ingredients', JSON.stringify(ingredients));
            initTables();
            closeIngredientModal();
        }

        function deleteIngredient(index) {
            let ingredients = JSON.parse(localStorage.getItem('ingredients')) || [];
            ingredients.splice(index, 1);
            localStorage.setItem('ingredients', JSON.stringify(ingredients));
            initTables();
        }

        // 订单管理
        function openAddOrderModal() {
            currentOrderIndex = null;
            document.getElementById('orderModalTitle').textContent = '添加订单';
            document.getElementById('orderNumber').value = '';
            document.getElementById('orderDish').value = '';
            document.getElementById('orderCustomer').value = '';
            document.getElementById('orderTime').value = '';
            document.getElementById('orderModal').style.display = 'block';
        }

        function openEditOrderModal(index) {
            currentOrderIndex = index;
            let orders = JSON.parse(localStorage.getItem('orders'));
            let order = orders[index];
            document.getElementById('orderModalTitle').textContent = '编辑订单';
            document.getElementById('orderNumber').value = order.number;
            document.getElementById('orderDish').value = order.dish;
            document.getElementById('orderCustomer').value = order.customer;
            document.getElementById('orderTime').value = order.time;
            document.getElementById('orderModal').style.display = 'block';
        }

        function closeOrderModal() {
            document.getElementById('orderModal').style.display = 'none';
        }

        function saveOrder() {
            let orders = JSON.parse(localStorage.getItem('orders')) || [];
            let number = document.getElementById('orderNumber').value;
            let dish = document.getElementById('orderDish').value;
            let customer = document.getElementById('orderCustomer').value;
            let time = document.getElementById('orderTime').value;
            if (currentOrderIndex === null) {
                orders.push({ number, dish, customer, time });
            } else {
                orders[currentOrderIndex] = { number, dish, customer, time };
            }
            localStorage.setItem('orders', JSON.stringify(orders));
            initTables();
            closeOrderModal();
        }

        function deleteOrder(index) {
            let orders = JSON.parse(localStorage.getItem('orders')) || [];
            orders.splice(index, 1);
            localStorage.setItem('orders', JSON.stringify(orders));
            initTables();
        }

        // 顾客管理
        function openAddCustomerModal() {
            currentCustomerIndex = null;
            document.getElementById('customerModalTitle').textContent = '添加顾客';
            document.getElementById('customerName').value = '';
            document.getElementById('customerContact').value = '';
            document.getElementById('customerFavoriteDish').value = '';
            document.getElementById('customerModal').style.display = 'block';
        }

        function openEditCustomerModal(index) {
            currentCustomerIndex = index;
            let customers = JSON.parse(localStorage.getItem('customers'));
            let customer = customers[index];
            document.getElementById('customerModalTitle').textContent = '编辑顾客';
            document.getElementById('customerName').value = customer.name;
            document.getElementById('customerContact').value = customer.contact;
            document.getElementById('customerFavoriteDish').value = customer.favoriteDish;
            document.getElementById('customerModal').style.display = 'block';
        }

        function closeCustomerModal() {
            document.getElementById('customerModal').style.display = 'none';
        }

        function saveCustomer() {
            let customers = JSON.parse(localStorage.getItem('customers')) || [];
            let name = document.getElementById('customerName').value;
            let contact = document.getElementById('customerContact').value;
            let favoriteDish = document.getElementById('customerFavoriteDish').value;
            if (currentCustomerIndex === null) {
                customers.push({ name, contact, favoriteDish });
            } else {
                customers[currentCustomerIndex] = { name, contact, favoriteDish };
            }
            localStorage.setItem('customers', JSON.stringify(customers));
            initTables();
            closeCustomerModal();
        }

        function deleteCustomer(index) {
            let customers = JSON.parse(localStorage.getItem('customers')) || [];
            customers.splice(index, 1);
            localStorage.setItem('customers', JSON.stringify(customers));
            initTables();
        }

        // 搜索功能
        function searchDishes() {
            let input = document.getElementById('dishSearch');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('dishTable');
            let tr = table.getElementsByTagName('tr');
            for (let i = 1; i < tr.length; i++) {
                let td = tr[i].getElementsByTagName('td')[0];
                if (td) {
                    let txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }

        function searchIngredients() {
            let input = document.getElementById('ingredientSearch');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('ingredientTable');
            let tr = table.getElementsByTagName('tr');
            for (let i = 1; i < tr.length; i++) {
                let td = tr[i].getElementsByTagName('td')[0];
                if (td) {
                    let txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }

        function searchOrders() {
            let input = document.getElementById('orderSearch');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('orderTable');
            let tr = table.getElementsByTagName('tr');
            for (let i = 1; i < tr.length; i++) {
                let td = tr[i].getElementsByTagName('td')[0];
                if (td) {
                    let txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }

        function searchCustomers() {
            let input = document.getElementById('customerSearch');
            let filter = input.value.toUpperCase();
            let table = document.getElementById('customerTable');
            let tr = table.getElementsByTagName('tr');
            for (let i = 1; i < tr.length; i++) {
                let td = tr[i].getElementsByTagName('td')[0];
                if (td) {
                    let txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = '';
                    } else {
                        tr[i].style.display = 'none';
                    }
                }
            }
        }

        // 页面加载完成后初始化表格
        window.onload = function () {
            initTables();
            openTab(event, 'Home');
        };
    </script>
</body>

</html>